import {useState} from "react";
import {Button, Popconfirm, Table, Space, Divider} from "antd";
import {ColumnProps, TablePaginationConfig} from "antd/lib/table";
import './index.scss'
import TitleSpan from "@/components/TitleSpan";
import {IValue} from "@/common/common";
import {formatData} from "@/common/util";
import FuncBtnGroup from "@/components/FuncBtnGroup";
import {FuncGroupsProps} from "@/components/FuncBtnGroup/constants";
import {SyncOutlined} from "@ant-design/icons";
import RadarStore from './RadarStore'
import Detail from "@/pages/radar/radarManage/detail";
import {observer} from "mobx-react";
import {IModalStatus} from "@/pages/radar/radarManage/interface";

const Content: React.FC<any> = (props: any) => {

  const [modelStatus, setModelStatus] = useState<IModalStatus>('none')
  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);

  const rowSelection = {}

  const handleTableChange = (pagination: TablePaginationConfig) => {

  }

  const renderTableOperation = (record: any) => {
    const funcBtnsProps: FuncGroupsProps = {
      btns: [],
      placement: "bottomLeft",
      htmlType: "a",
    };
    funcBtnsProps.btns.push({
      key: `update${record.id}`,
      text: "修改",
      para: record.id,
      onClick: editRecord,
      dropdownVisible: false
    });
    funcBtnsProps.btns.push({
      key: `remove${record.id}`,
      text: "删除",
      para: [record.id],
      confirmMsg: "确定删除这个雷达设备吗",
      onClick: delRecord,
      dropdownVisible: false
    });
    const funcs = FuncBtnGroup(funcBtnsProps);
    const result: any[] = [];
    const len = funcs.length - 1;
    funcs.forEach((item, index) => {
      result.push(item);
      if (index < len) {
        result.push(<Divider type="vertical" key={"divd" + index}/>);
      }
    });
    return result;
  };

  const columns: ColumnProps<any>[] = [
    {
      title: "雷达名称",
      dataIndex: "name",
      width: 100,
      render: (text: string) => {
        return (
          <TitleSpan style={{width: 100}}>{text ? text : "-"}</TitleSpan>
        );
      },
    },
    {
      title: "雷达编号",
      dataIndex: "id",
      width: 200,
      render: (text: string) => {
        return (
          <TitleSpan style={{width: 300}}>{text ? text : "-"}</TitleSpan>
        );
      },
    },
    {
      title: "雷达品牌",
      dataIndex: "brand",
      width: 100,
      render: (text: IValue) => {
        return <TitleSpan>{text ? text.name : "-"}</TitleSpan>;
      },
    },
    {
      title: "型号",
      width: 100,
      dataIndex: "model",
      render: (text: IValue) => {
        return <TitleSpan>{text ? text.name : "-"}</TitleSpan>;
      },
    },
    {
      title: "雷达IP",
      dataIndex: "ip",
      width: 100,
      render: (text: string) => {
        return <TitleSpan>{text ? text : "-"}</TitleSpan>;
      },
    },
    {
      title: "雷达端口",
      dataIndex: "port",
      width: 80,
      render: (text: string) => {
        return <TitleSpan>{text ? text : "-"}</TitleSpan>;
      },
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      width: 100,
      render: (_, record: any) => {
        const time = record.createTime ? formatData(record.createTime) : "";
        return <TitleSpan>{time ? time : "-"}</TitleSpan>;
      },
    },
    {
      title: "操作",
      align: "center",
      width: 200,
      fixed: "right",
      render: (_, record: any) => {
        return renderTableOperation(record);
        // return (
        //   <>
        //     <Button type="link" onClick={() => editRecord(record.id)}>
        //       修改
        //     </Button>
        //     <Popconfirm
        //       title="确定删除这个雷达设备吗?"
        //       onConfirm={() => delRecord([record.id])}
        //       okText="确定"
        //       cancelText="取消"
        //       placement="top"
        //     >
        //       <Button type="link">删除</Button>
        //     </Popconfirm>
        //   </>
        // );
      },
    },
  ];

  const createRecord = () => {
    setModelStatus('create')
  }

  const delRecord = (ids: string[]) => {

  }

  const editRecord = (id: string) => {

  }

  const renderBtnsGroup = () => {
    const funcBtnsProps: FuncGroupsProps = {
      btns: [
        {
          key: `create`,
          text: "新增",
          para: selectedRowKeys,
          type: "primary",
          onClick: createRecord,
          dropdownVisible: false
        },
        {
          key: `del`,
          text: "删除",
          confirmMsg: "确认删除已选中的雷达吗？",
          para: selectedRowKeys,
          disabled: !Boolean(selectedRowKeys.length),
          onClick: delRecord,
          dropdownVisible: false
        },
      ],
      placement: "bottomLeft",
      htmlType: "button",
    };

    return (
      <Space size={10}>
        {FuncBtnGroup(funcBtnsProps)}
        <Button
          type="dashed"
          onClick={() => {
            // Store.queryRadarList();
          }}
        >
          <SyncOutlined/>
        </Button>
        {`共${RadarStore.pageInfo.total}条记录`}
      </Space>
    );
  };

  return (
    <div className="listContainer">
      <div className="bths">{renderBtnsGroup()}</div>
      <Table
        rowKey="id"
        className="table"
        rowSelection={rowSelection}
        columns={columns}
        dataSource={RadarStore.radarList}
        scroll={{x: "max-content"}}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          current: RadarStore.pageInfo.page,
          pageSize: RadarStore.pageInfo.size,
          total: RadarStore.pageInfo.total,
          // pageSizeOptions: ["2", "3", "10"],
        }}
        onChange={handleTableChange}
      />

      {(modelStatus !== 'none') && (
        <Detail
          type={modelStatus}
          title={
            modelStatus === "create" ? "新增雷达" : modelStatus === "update" ? "修改雷达" : "查看雷达"
          }
          onCancel={() => {
            setModelStatus('none')
          }}
          onOk={() => {
            setModelStatus('none')
          }}/>
      )}
    </div>
  )
}

export default observer(Content)
